<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="format-detection" content="telephone=no">
    <title>书城</title>
    <link rel="stylesheet" href="css/reset.css"><!--清除默认样式-->
    <style type="text/css">

        html {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
        }

        body {
            text-align: left;
            width: 100%;
            overflow: hidden;
            background: #e9dfc7;
        }

        /****************************顶部导航*/
        .top-nav {
            position: fixed;
            top: 0;
            height: 50px;
            width: 100%;
            z-index: 9999;
            background: #000;
            color: #fff;

        }

        .icon-back {
            position: absolute;
            top: 14px;
            left: 10px;
            width: 23px;
            height: 23px;
            background: url(
            );
            background-size: contain;

        }

        .nav-title {
            position: absolute;
            top: 15px;
            left: 38px;
        }

        /********************************主体内容*/
        .m-read-content {
            font-size: 14px;
            color: #555;
            line-height: 31px;
            padding: 15px;

        }

        .m-read-content h4 {
            font-size: 20px;
            color: #736357;
            border-bottom: 1px solid #736357;
            letter-spacing: 2px;
            margin: 0 0 1em 0;

        }

        .m-read-content p {
            text-indent: 2em;
            margin: 0.5em 0;
            letter-spacing: 0;
            line-height: 24px;

        }

        /***************************************底部按钮*/
        .m-button-bar {
            width: 70%;
            margin: 0px auto;
            max-width: 640px;
            padding: 5px;

        }

        .u-tab {
            width: 100%;
            height: 34px;
            margin: 10px auto;
            line-height: 34px;
            border-radius: 17px;
            border: 1px solid #858382;
            background: #000;
            opacity: 0.9;
        }

        .u-tab li {
            list-style: none;
            text-align: center;
            float: left;
            width: 49%;
            color: #fff;
        }

        .u-tab li:nth-of-type(1) {
            border-right: 1px solid #ffffff;

        }

        /***************************************总面板*/
        .pannel {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: auto;
            color: #fff;

        }

        /**********************************************面板*/
        .nav-pannel {
            width: 100%;
            height: 100px;
            position: fixed;
            bottom: 70px;
            left: 0px;
            background: rgba(0, 0, 0, 0.8);

        }

        .nav-pannel > div {
            width: 100%;
            height: 50%;

        }

        .nav-pannel > .child-mod1 {
            padding-top: 13px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .child-mod1 > button {
            width: 80px;
            height: 25px;
            background: none;
            border: 1px solid #8c8c8c;
            color: #fff;
            border-radius: 10px;
            outline: none;
        }

        .child-mod1 > button:nth-of-type(1) {
            margin: 0 10px 0 20px;
        }

        .nav-pannel > div > span {
            margin-left: 10px;
        }

        .nav-pannel > .child-mod2 > span {
            line-height: 50px;
            float: left;
        }

        .child-mod2 > ul {
            float: left;
            height: 50px;
            margin: 0 0 0 20px;
            padding-top: 12px;
            position: relative;

        }
        /*背景颜色*/

        .child-mod2 > ul > li {
            width: 26px;
            height: 26px;
            float: left;
            margin-left: 10px;
            position: relative;

        }

        .child-mod2 > ul > li:nth-of-type(1)>span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #f7eee5;
        }
        .child-mod2 > ul > li:nth-of-type(1)>i{
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: none;


        }

        .child-mod2 > ul > li:nth-of-type(2)>span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;

            background-color: #e9dfc7;
        }
        .child-mod2 > ul > li:nth-of-type(2)>i {
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: block;

        }


        .child-mod2 > ul > li:nth-of-type(3)>span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #a4a4a4;
        }
        .child-mod2 > ul > li:nth-of-type(3)>i {
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: none;


        }


        .child-mod2 > ul > li:nth-of-type(4)>span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #cdefce;
        }
        .child-mod2 > ul > li:nth-of-type(4)>i {
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: none;


        }


        .child-mod2 > ul > li:nth-of-type(5)>span {

            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #283548;
        }
        .child-mod2 > ul > li:nth-of-type(5)>i {
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: none;


        }


        .child-mod2 > ul > li:nth-of-type(6)>span {
            width: 100%;
            height: 100%;
            display: inline-block;
            border-radius: 50%;
            background-color: #0f1410;
        }
        .child-mod2 > ul > li:nth-of-type(6)>i {
            position: absolute;
            width: 26px;
            height: 26px;
            border:2px solid #ff7800;
            top:-2px;
            left:-1px;
            border-radius: 50%;
            display: none;


        }


        /*****************************************底部导航*/
        .bottom-nav {
            width: 100%;
            height: 70px;
            position: fixed;
            bottom: 0;
            left: 0;
            background: rgba(0, 0, 0, 0.8);

        }

        .bottom-nav > ul {
            width: 100%;
            height: 100%;
            display: flex;
            text-align: center;
            padding-top: 10px;
        }

        .bottom-nav > ul > li {
            flex: 1;
        }

        .bottom-nav > ul > li:nth-of-type(1) > span {
            width: 15px;
            height: 10px;
            display: inline-block;

            background: url();
            background-size: contain;
        }

        .bottom-nav > ul > li:nth-of-type(2) > span {
            width: 16px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }
        .bottom-nav > ul > li.cur1 >span {
            width: 15px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }


        .bottom-nav > ul > li:nth-of-type(3) > span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }
        .bottom-nav > ul > li.cur2 >span {
            width: 10px;
            height: 10px;
            display: inline-block;
            background: url();
            background-size: contain;

        }


        /*响应层*/
        .articl-action-mid {
            width: 100%;
            height: 40%;
            position: fixed;
            top: 30%;
            left: 0;
        }
    </style>

</head>
<body>
<div id="root" class="container">
    <!--响应层-->
    <div class="m-artical-action">
        <div class="articl-action-mid" id="action_md"></div>
    </div>
    <!--导航-->
    <div id="top_nav" class="top-nav" style="display: none">
        <div class="icon-back"></div>
        <div class="nav-title">返回书架</div>
    </div>
    <!--标题-->
    <div id="fition_chapter_title"></div>
    <!--存放文章内容-->
    <div id="fition_container" class="m-read-content">
    </div>
    <!--上下章-->
    <div class="m-button-bar">
        <ul class="u-tab">
            <li id="prev_button">上一章</li>
            <li id="next-button">下一章</li>
        </ul>
    </div>
    <!--总面板面板-->
    <div class="pannel">
        <!--面板-->
        <div class="nav-pannel" id="font_container" style="display:none">
            <div class="child-mod1">
                <span>字号</span>
                <button id="large_font" class="font-size-button">
                    大
                </button>
                <button id="small_font" class="font-size-button">
                    小
                </button>
            </div>
            <div class="child-mod2">
                <span>背景</span>
                <ul id="ulbg">
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>
                    <li>
                        <i></i>
                        <span></span>
                    </li>


                </ul>
            </div>
        </div>

        <!--底部导航-->
        <div id="bottom_nav" class="bottom-nav" style="display: none">
            <ul>
                <li>
                    <span></span>
                    <p>目录</p>
                </li>
                <li id="ziti">
                    <span></span>
                    <p>字体</p>
                </li>
                <li id="ye">
                    <span></span>
                    <p>夜间</p>
                </li>
            </ul>
        </div>

    </div>
</div>


<!------------------以下JS代码----------------------------->
<script src="lib/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
    window.jQuery = $;
</script>
<script src="js/jquery.base64.js"></script>
<script src="js/jquery.jsonp.js"></script>
<script>
    'use strict';
    (function () {
        var Util = (function () {
            /*本地化存储数据*/
            var prefix = 'heml5_readr_';
            var StorageGetter = function (key) {
                return localStorage.getItem(prefix + key);
            }
            var StorageSetter = function (key, val) {
                return localStorage.setItem(prefix + key, val)

            }
            var getBSONP= function (url,callback) {
                /*数据解密 解码*/
                return $.jsonp({
                    url:url,
                    cache:true,
                    callback:'duokan_fiction_chapter',
                    success: function (result) {
                        var data= $.base64.decode(result);
                        var json=decodeURIComponent(escape(data));
                        callback(json);
                    }
                })

            }
            return {
                getBSONP:getBSONP,
                StorageGetter: StorageGetter,
                StorageSetter: StorageSetter,
            }

        })();

        /*全局Dom*/
        var Dom = {
            top_nav: $('#top_nav'),  //顶部导航
            action_md: $('#action_md'), //响应层
            font_container: $('#font_container'),//面板
            bottom_nav: $('#bottom_nav'),//底部导航
            ye:$('#ye'),//夜间切换dom
            ziti:$('#ziti')//字体dom



        }
        /*全局变量*/
        var Win=$(window);
        var Doc=$(document);
        var FitionContainer=$('#fition_container')
        var initFontSize=Util.StorageGetter('font_size');
        var bodyBackground= Util.StorageGetter('bodyColor');//背景颜色
        var pText=Util.StorageGetter('pText');//夜间字体变化
        var pTubiao=Util.StorageGetter('pTubiao');//白天夜间图标变化保存

        /*字体保存设置*/
        initFontSize=parseInt(initFontSize)
        if(!initFontSize){
            initFontSize=14;
        }
        FitionContainer.css({fontSize:initFontSize})

        /*夜间颜色切换保存设置*/
        $('body').css({background:bodyBackground})
        /*夜间字体切换保存*/
        Dom.ye.find('p').text(pText)
        /*白天夜间图标保存*/
        Dom.ye.addClass(pTubiao)
        var yey=false;//是否是夜间模式



        function main() {
            //  项目的入口函数
            var readerModel=ReaderModel();
            var readerUI=ReaderBaseFrame(FitionContainer);
            readerModel.init(function (data) {
                readerUI(data);

            });
            EventHanlder();
        }

        function ReaderModel() {
            var Chapter_id;
            //  实现和阅读器相关的数据交互的方法
            /*先获取章节列表信息*/
            var init= function (UIcallback) {
                getFictionInfo(function () {
                    getCurChapterContent(Chapter_id, function (data) {
                        debugger;
                        UIcallback&&UIcallback(data)
                    })
                })
            }
            var getFictionInfo= function (callback) {
                $.get('data/chapter.json', function (data1) {
                    /*拿到章节信息之后的回调*/
                    Chapter_id= data1.chapters[1].chapter_id;
                    callback&&callback();
                },'json')
            }
            /*根据章节ID获取章节*/
            var getCurChapterContent= function (chapter_id,callback) {
                $.get('data/data'+chapter_id+'.json', function (data1) {
                    if(data1.result==0){
                        var url=data1.jsonp;
                        Util.getBSONP(url, function (data2) {
                            callback&&callback(data2);
                        })
                    }
                },'json')
            }
            return{
                init:init,
            }
        }
        function ReaderBaseFrame(container) {
            // 渲染基本的UI结构
            function parseChapterData(jsonData){
                var jsonObj=JSON.parse(jsonData);
                var html= '<h4>'+jsonObj.t+'</h4>'
                for (var i = 0; i < jsonObj.p.length; i++) {
                    html+='<p>'+jsonObj.p[i]+'</p>';

                }
                return html;
            }
            return function (data) {
                container.html(parseChapterData(data))

            }
        }

        function EventHanlder() {
            // 交互的事件绑定
            /*响应层*/
            Dom.action_md.click(function () {

                    Dom.top_nav.toggle()
                    Dom.bottom_nav.toggle()
                    Dom.font_container.hide()
                Dom.ziti.removeClass('cur1');


            });

            /*滚动的时候隐藏顶部和底部导航*/
            Win.scroll(function () {
                Dom.top_nav.hide()
                Dom.bottom_nav.hide();
                Dom.font_container.hide()
                Dom.ziti.removeClass('cur1');



            })
            /*点击字体的时候面板出现*/
            Dom.ziti.click(function () {
                Dom.font_container.toggle()
                Dom.ziti.toggleClass('cur1');


            })
            /*增大字体*/
            $('#large_font').click(function () {
                initFontSize++;
                if(initFontSize>20){
                    initFontSize=20;
                    return;
                }
                FitionContainer.css({fontSize:initFontSize})
                Util.StorageSetter('font_size',initFontSize)
            })
            /*减小字体*/
            $('#small_font').click(function () {
                initFontSize--;
                if(initFontSize<=12){
                    initFontSize=12;
                    return;
                }
                FitionContainer.css({fontSize:initFontSize})
                Util.StorageSetter('font_size',initFontSize)

            })
            /*夜间模式*/
            Dom.ye.click(function () {

                if(yey){
                    Dom.ye.addClass('cur2')
                    var cur2= 'cur2';

                    bodyBackground='#0f1410';
                    $('body').css({background:bodyBackground})
                    Util.StorageSetter('bodyColor',bodyBackground)
                    yey=false;
                    var pText='夜间'
                    $(this).find('p').text(pText)
                    Util.StorageSetter('pText',pText)
                    Util.StorageSetter('pTubiao',cur2)
                    libg($('#ulbg>li').eq(5))
                }else {
                    Dom.ye.removeClass('cur2')
                    bodyBackground='#fff';
                    var cur2='';
                    yey=true;
                    $('body').css({background:bodyBackground})
                    Util.StorageSetter('bodyColor',bodyBackground)
                    var pText='白天'
                    $(this).find('p').text(pText)
                    Util.StorageSetter('pText',pText)
                    Util.StorageSetter('pTubiao',cur2)
                    libg($('#ulbg>li').eq(1))
                }
            })

            /*背景颜色设置*/

            $('#ulbg>li').each(function (index,item) {
                    $(item).click(function () {
                            libg(item)
                    })

            })
            /*背景颜色封装*/
            function libg(item){
                var bg=$(item).find('span').css('background-color')
                $('body').css({background:bg})
                $(item).find('i').css({display:'block'})
                $(item).siblings().find('i').css({display:'none'})
                Util.StorageSetter('bodyColor',bg)

            }

        }


        main();


    })()
</script>
</body>
</html>